<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue路由的机制</title>
	</head>
	<body>
		<div id="app">
			<!-- 2.定义路由的连接
		 <router-link 解析之后变为a标签 to=""解析之后相当于href   ></router-link>
		 -->
			<router-link to="/user">用户</router-link>
			<router-link to="/dog">狗狗</router-link>

			<!-- 3.定义路由的填充位，该位置用来展现具体页面（组件） -->
			<router-view></router-view>
		</div>

		<!-- 4.2定义组件模板 -->
		<template id="userTem">
			<div>
				<h1>我是组件的内容!!!!</h1>
			</div>
		</template>

		<!-- //嵌套路由 -->
		<template id="dogTem">

			<div>
				<h1>养宠物，抱着睡，早登极乐</h1>
				<!-- 定义子组件的标签 -->
				<router-link to="/dog/samo">萨摩</router-link>
				<router-link to="/dog/hashiqi">哈士奇</router-link>
				<!-- 定义子组件占位符 -->
				<router-view></router-view>
			</div>
		</template>
		<!-- 映入vue。js文件 -->
		<script src="../js/vue.js"></script>
		<!-- 导入 路由js  顺序不能乱 -->
		<script src="../js/vue-router.js"></script>
		<script>
			// 4.定义组件
			let user = {
				template: "#userTem"
			}
			let dog = {
				template: "#dogTem"
			}

			let samo = {
				template: `<h1>养萨摩，早登极乐</h1>`
			}
			let hashiqi = {
				template: `<h1>养哈士奇，早登极乐</h1>`
			}

			//5.创建路由对象、定义规则

			let router = new VueRouter({
				//定义路由规则
				routes: [
					//利用redirect 实现路由重定向
					//{path: "/",redirect: "/user"},
					/* 这个地方的是根目录的下边，渲染的是目录下的*/
					{
						path: "/user",
						component: user
					},

					{
						path: "/dog",
						component: dog,
						children: [{
								path: "/dog/samo",
								component: samo
							},
							{
								path: "/dog/hashiqi",
								component: hashiqi
							},
						]
					}


				]

			})
			//6.将我们的路由对象交给vue对象管理

			const vue = new Vue({
				el: '#app',
				//绑定路由
				router //名称一样时可以简化。
			})
		</script>

	</body>
</html>
